<template>
  <div
    class="search-bar"
    @click="
      (e) => {
        e.stopPropagation()
      }
    "
  >
    <el-form
      ref="searchBarForm"
      class="search-bar-form"
      label-position="right"
      :label-width="labelWidth"
      :model="formData"
      :inline="true"
    >
      <template v-for="(item, index) in config">
        <div v-if="item.type == 'button'" :key="item.prop" class="handleBox">
          <div v-if="!item.policy || checkPermission(item.policy)">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button v-if="isReset" @click="handleReset">重置</el-button>
            <div v-if="isExpand && hasExpand > 1" class="show-more" @click="handleExpand">
              {{ isShow ? '收起' : '展开' }}
              <i :class="['el-icon-arrow-down', { rotateDeg: isShow }]" />
            </div>
          </div>
        </div>
        <el-form-item
          v-else
          v-show="isExpand && hasExpand > 1 ? index < hasExpand : true"
          ref="searchBarItem"
          :key="item.prop"
          class="search-bar-item"
          :label="item.hideLabel ? '\u0020' : item.label"
          :prop="item.prop"
          :rules="item.rules"
          :label-width="labelWidth ? labelWidth : '110px'"
          :style="item.style"
        >
          <el-date-picker
            v-if="item.type === 'daterange'"
            v-model="formData[item.prop]"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            :start-placeholder="item.startPlaceholder || '开始'"
            :end-placeholder="item.endPlaceholder || '结束'"
            :picker-options="pickerOptions"
            size="small"
          />
          <el-date-picker
            v-else-if="item.type === 'daterangehms'"
            v-model="formData[item.prop]"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            :start-placeholder="item.startPlaceholder || '开始'"
            :end-placeholder="item.endPlaceholder || '结束'"
            :default-time="['00:00:00', '23:59:59']"
            size="small"
          />
          <el-date-picker
            v-else-if="item.type === 'monthrange'"
            v-model="formData[item.prop]"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :class="item.class || ''"
            size="small"
          />

          <el-date-picker
            v-else-if="item.type === 'datetimerange'"
            v-model="formData[item.prop]"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :class="item.class || ''"
            size="small"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
          />

          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="formData[item.prop]"
            type="date"
            :clearable="false"
            :class="item.class || ''"
            :placeholder="item.placeholder"
            size="small"
          />

          <el-date-picker
            v-else-if="item.type == 'year'"
            v-model="formData[item.prop]"
            type="year"
            :clearable="false"
            :class="item.class || ''"
            :placeholder="item.placeholder"
            size="small"
          />

          <el-date-picker
            v-else-if="item.type == 'month'"
            v-model="formData[item.prop]"
            type="month"
            :clearable="false"
            :class="item.class || ''"
            :placeholder="item.placeholder"
            value-format="MM"
            format="MM"
            popper-class="monthStyle"
            size="small"
          />

          <el-date-picker
            v-else-if="item.type == 'datetime'"
            v-model="formData[item.prop]"
            type="datetime"
            :class="item.class || ''"
            :placeholder="item.placeholder"
            size="small"
          />

          <el-select
            v-else-if="item.type == 'select'"
            v-model="formData[item.prop]"
            :filterable="typeof item.filterable === 'undefined' ? true : item.filterable"
            :clearable="typeof item.clearable === 'boolean' ? item.clearable : true"
            :multiple="item.multiple || false"
            :collapse-tags="item.collapseTags || false"
            :placeholder="item.placeholder"
            :class="item.class || ''"
            size="small"
          >
            <el-option v-for="v in item.options" :key="v.value" :label="v.label" :value="v.value" />
          </el-select>

          <el-cascader
            v-else-if="item.type == 'cascader'"
            v-model="formData[item.prop]"
            :filterable="typeof item.filterable === 'undefined' ? true : item.filterable"
            :clearable="typeof item.clearable === 'boolean' ? item.clearable : true"
            :show-all-levels="item.showalllevels || false"
            :props="item.multiple"
            :collapse-tags="item.collapseTags || false"
            :options="item.options"
            :placeholder="item.placeholder"
            :class="item.class || ''"
            size="small"
            style="width: 100%"
          />
          <el-radio-group v-else-if="item.type == 'radio'" v-model="formData[item.prop]">
            <el-radio-button v-for="v in item.options" :key="v.value"  :label="v.value">
              {{ v.label }} &nbsp; 
              <span v-if="v.num">
              {{ v.num }}
              </span>
            </el-radio-button>
           
          </el-radio-group>
          <el-input
            v-else
            v-model="formData[item.prop]"
            :class="item.class || ''"
            :placeholder="item.placeholder || ''"
            size="small"
          />
        </el-form-item>
      </template>
      <!-- <div   v-if="!btn.policy || checkPermission(btn.policy)" class="handleBox">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button v-if="isReset" @click="handleReset">重置</el-button>
        <div v-if="isExpand && hasExpand" class="show-more" @click="handleExpand">
          {{ isShow ? '收起' : '展开' }}
          <i :class="['el-icon-arrow-down', { rotateDeg: isShow }]" />
        </div>
      </div> -->
    </el-form>
  </div>
</template>

<script>
import { checkPermission } from '@/utils/central'
export default {
  name: 'SearchBar',
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    config: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    width: {
      type: String,
      default: '100%'
    },
    isHandle: {
      type: Boolean,
      default: true
    },
    isReset: {
      type: Boolean,
      default: true
    },
    isExpand: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: false,
      hasExpand: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {
    formData: {
      get: function () {
        return this.value
      },
      set: function (val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.$nextTick(() => {
      const { index } = this.getExpand()
      console.log(this.getExpand(), 'index')
      this.hasExpand = index
    })
  },
  methods: {
    checkPermission,
    handleExpand() {
      this.isShow = !this.isShow
      if (this.isShow) {
        this.hasExpand = this.config.length
      } else {
        const { index } = this.getExpand()
        this.hasExpand = index
      }
      console.log(this.hasExpand, 'hasExpand')
    },
    handleSearch() {
      const result = this.clear(this.formData)
      this.$emit('search', result)
    },
    handleReset() {
      this.formData = {}
      this.$emit('searchReset')
    },
    getExpand() {
      const s = this.$refs.searchBarForm.$el
      const h = document.querySelector('.handleBox')
      const Els = s.querySelectorAll('.el-form-item')
      return Array.from(Els).reduce(
        (prev, cur, index) => {
          const mgl = parseInt(getComputedStyle(cur).marginLeft)
          const mgr = parseInt(getComputedStyle(cur).marginRight)
          prev.totals += cur.offsetWidth + mgl + mgr
          if (prev.totals > s.offsetWidth - h.offsetWidth && !prev.index) prev.index = index
          return prev
        },
        { totals: 0, index: undefined }
      )
    },
    clear(obj) {
      const result = {}
      for (const k in obj) {
        const val = obj[k]
        if (val !== '' && val !== undefined && val !== null) result[k] = val
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.rotateDeg {
  transform: rotate(180deg);
}
::v-deep.search-bar-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;

  .el-form-item__content {
    line-height: initial;
  }
  .el-form-item {
    margin: 9px 15px 9px 0;
  }
  .el-input .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
  .el-date-editor--daterange.el-input__inner {
    max-width: 300px;
  }
  .el-date-editor {
    height: 36px;
    line-height: 36px;
  }
  .handleBox {
    width: 270px;
    margin: 9px 0px 9px auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .show-more {
      font-size: 14px;
      color: #7c8998;
      font-style: normal;
      cursor: pointer;
      margin-left: 0.2rem;
    }
    .el-button {
      width: 0.96rem;
      height: 36px;
      padding: 0;
      line-height: 36px;
    }
  }
}
</style>
